<script setup lang="ts">
import type { PIResponseData } from "./apis/type"
// import { useUserStore } from "@/pinia/stores/user"
import { getPi } from "./apis"

// const router = useRouter()
//
// const userStore = useUserStore()

const params = {
  pageNo: 1,
  pageSize: 10,
  no: ""
}

const data = ref<PIResponseData>({
  code: 0,
  msg: "",
  data: {
    total: 0,
    list: []
  }
})

function getProductList() {
  getPi(params).then((res) => {
    data.value = res
  })
}

function changePage(page: number) {
  params.pageNo = page
  getProductList()
}

onMounted(() => {
  getProductList()
})
</script>

<template>
  <div un-py-16px>
    <van-cell-group inset>
      <van-field
        v-model="params.no"
        center
        clearable
        label="Invoice number"
        placeholder="Input your Invoice number"
      >
        <template #button>
          <van-button size="small" type="primary" @click="getProductList()">
            Search
          </van-button>
        </template>
      </van-field>
    </van-cell-group>
    <van-cell-group inset style="margin-top: 10px">
      <van-cell v-for="item in data.data.list" :key="item.id" :title="item.no" is-link :to="`/pi/detail/${item.id}`" />
    </van-cell-group>
    <van-cell-group inset style="margin-top: 10px">
      <van-pagination @change="changePage" v-model="params.pageNo" :total-items="data.data.total" :show-page-size="params.pageNo">
        <template #prev-text>
          <van-icon name="arrow-left" />
        </template>
        <template #next-text>
          <van-icon name="arrow" />
        </template>
        <!--        <template #page="{ text }"> -->
        <!--          {{ text }} -->
        <!--        </template> -->
      </van-pagination>
    </van-cell-group>
  </div>
</template>
